export default function drawGridPoint(el, opts = {}){

	let target = el;
	if (typeof target === 'string' && target) {
		target = document.querySelector(target);
	}

	if (!(target instanceof HTMLElement) || !target) {
		return;
	}

	opts = Object.assign({
		gridWidth: 10,
		gridHeight: 10,
		pointSize: 1,
		pointColor: 'black'
	}, opts);

	let canvas = document.createElement('canvas');
	canvas.width = opts.gridWidth;
	canvas.height = opts.gridHeight;
	
	let ctx = canvas.getContext('2d');
	ctx.fillStyle = opts.pointColor;
	ctx.fillRect(opts.gridWidth - opts.pointSize, opts.gridHeight - opts.pointSize, opts.pointSize, opts.pointSize);

	let bgImage = canvas.toDataURL();
	target.style.backgroundImage = `url(${bgImage})`;
	return bgImage;

}